<template>
    <div class="wrap">
        <div class="i-home">
            <div class="tps">
                <div class="search" >
                    <search  placeholder="请输入商品名称" v-model="value" background="#fff" @click="searchIn" />
                </div>
            </div>
            <div>
                <div class="bannerDetail">
                  <swipe :autoplay="3000" style="height: 4rem;">
                    <swipe-item v-for="(item,index) in shopDetail.gallery_img" :key="index"><img :src="item.url"></swipe-item>
                  </swipe>
                </div>
              <!-- 店铺信息 -->
                <div class="user_t">
                  <div class="ts">
                    <i><router-link to="">
                      <img v-if="shop_logo != 'def'" :src="shop_logo" width="100%" style="height: 1.3rem;">
                      <img v-if="shop_logo == 'def'" src="./../../assets/img/defoutAtho.png" width="100%">
                    </router-link></i>
                    <span><p style="color: #666;">{{shopDetail.shop_name}}</p><p class="des">{{shopDetail.shop_description}}</p></span>
                  </div>
                  <div class="ts profile">
                    <span>
                      <p v-if="shopDetail.address != null" class="text"><i class="fa fa-map-marker fa-lg" aria-hidden="true"></i>地址：{{shopDetail.address}}</p>
                      <p v-if="shopDetail.mobile != null" class="text"><i class="fa fa-phone fa-lg" aria-hidden="true"></i>电话：{{shopDetail.mobile}}</p>
                    </span>
                  </div>
                  <div class="ts profile" v-if="shopDetail.tags">
                    <span>
                      <div class="text">
                        <p v-for="(item,index) in shopDetail.tags" :key="index"><i :class="item.icon" aria-hidden="true"></i>{{item.text}}</p>
                      </div>
                    </span>
                  </div>
                </div>
                <ul class="m_nav">
                  <router-link to="/cate" tag="li"><span><i class="fa fa-bars fa-lg" aria-hidden="true"></i></span><p>全部分类</p></router-link>
                  <!--<router-link to="" tag="li"><span><i class="fa fa-handshake-o fa-lg" aria-hidden="true"></i></span><p>我要拼团</p></router-link>-->
                  <!--<router-link to="" tag="li"><span><i class="fa fa-bolt fa-lg" aria-hidden="true"></i></span><p>V购秒杀</p></router-link>-->
                  <router-link to="/notice" tag="li"><span><i class="fa fa-comment-o fa-lg" aria-hidden="true"></i></span><p>公告</p></router-link>
                  <!-- <router-link to="/dvpt" tag="li"><span><i class="fa fa-file-text fa-lg" aria-hidden="true"></i></span><p>反馈</p></router-link> -->
                </ul>
              <!-- 导航 -->
                <div class="tps">
                  <div class="shopheade">
                    <div class="type-choose-wrap">
                      <div class="header-wrap">
                        <div class="header-wrap-inner">
                          <div class="types-header" ref="header">
                            <!--<div class="type-item" :class="{'selected':currentType == -1}" @click="selectType(-1)">全部</div>-->
                            <div class="type-item" :class="{'selected':currentType == index}" v-for="(item,index) in categoryList" :key="index" @click="selectType(index,item.cate_id)">{{item.cate_title}}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="shoplist shopall">
                    <ul>
                        <router-link  :to="{path:'mallDetails',query:{spec_id:item.spec_id}}" v-for="(item,index) in listAll" :key="index" tag="li">
                          <van-icon class="d-icon" :name="item.icon_name"/><span ><img :src="item.cover_img" alt=""></span>
                          <p>{{item.product_name}}<br>
                            <label><i class=" left">￥{{item.unit_money}}</i></label>
                            <label><i class="right" style="font-size: .3rem;color: #999;margin-top: .3rem;">剩余：{{item.shop_spec_stock_total}}</i></label>
                            <!--<label style="float: right;">-->
                              <!--<van-icon class="left" style="color: #999;" name="exchange"/>-->
                              <!--<i style="color: #999;margin-top: 0.15rem;" class="left">{{item.unit_point}}</i>-->
                            <!--</label>-->
                          </p>
                          <!--<p>-->
                            <!--<label class="point">获赠积分：{{item.point}}</label>-->
                            <!--<label style="float: right;    color: #bcb4b4;    font-size: .3rem;">库存：{{item.shop_spec_stock_total}}</label>-->
                          <!--</p>-->
                        </router-link>
                    </ul>
                    <p v-if="page != pageNum && listAll.length != 0" @click="onLoad()">我是有底线的</p>
                    <p v-if="page == pageNum || listAll.length == 0">没有更多的数据</p>
                </div>
            </div>
        </div>
        <tabbar :num ="num"></tabbar>
    </div>
</template>
<script>
	import ScrollUtils from './../../assets/js/ScrollUtils';
    import tabbar from "./../../components/tabbar.vue";
    import { Search, Swipe, SwipeItem, Icon, Tag, Dialog } from 'vant';
    export default {
        data(){
            return {
                value:'',
                head_img: '',   //头像
                categoryList:{},
                currentType: 0,  //下标
                shop_gallery_img: [
                  // {url: 'https://img1.360buyimg.com/da/jfs/t18700/341/2547325961/186825/8b3a81aa/5afbf194Nce807c23.jpg!cr_1125x549_0_72'},
                  // {url: 'https://img1.360buyimg.com/da/s750x366_jfs/t16597/120/2554768806/131851/c7e29e0e/5afe5131N58121cf5.jpg!cr_1125x549_0_72.dpg'},
                  // {url: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t16867/14/2616091840/403302/2e8ee9ea/5afeb4dfN2f48e76a.jpg!cr_1125x549_0_72!q70.jpg.dpg'}
                ],
                shop_logo: '',
                shopDetail: [],
                listAll:[],
                pageSize:'',  //有多少条数据
                pageNum:'',  //总页数
                page:1,  //页数
                pagetType:0,
                num:0,
                code: this.getQueryString('code'),
                state: this.getQueryString('state')
            }
        },
		mounted(){
      //自动登录
      var token = window.localStorage.getItem('token');
      if(!token || token == 'undefined'){
        if(!this.code){
          this.$router.push('/auth');
          return;
        }
        this.autoLogin();
      }else  {
        this.initialize();  //获取商品详情
        this.catelist();  //商品分类
      }
    },
		methods:{
			//左上角返回键
			onClickLeft () { this.$router.push('/mall');},
			//获取商品详情
			initialize(id){
        var _this = this;


        //店铺详情
        this.shopInfo();

				this.Tools.AXIOS({
          url: 'product/mall',
					transformRequest:{
                        cate_id: id || 0,
                        page: this.page || 1,
					},
                    success: function (res) {
                        let result = res.data.data
                        _this.pageSize = result.pageSize;
                        _this.pageNum = result.pageNum;
                        _this.listAll.push(...result.list);
                    }
                })
        },
       getQueryString(name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return unescape(r[2]); return null;
        },
        //wxOuth2.0登录
        autoLogin() {
			    let _this = this;
          this.Tools.AXIOS({
            url: 'passport/wxauto',
            transformRequest:{
              code: _this.code,
              state: _this.state
            },
            success: function (res) {
              if(res.data.msg == 'unstate') {
                _this.$router.push('/auth');
                return;
              }
              window.localStorage.setItem('token',res.data.data.token);
              window.localStorage.setItem('user_id',res.data.data.user_id);
              window.localStorage.setItem('nick',res.data.data.nick);
              Dialog.alert({
                message: '微信自动登陆成功！'
              }).then(() => {
                location.reload();
              })
            },error: function (res) {
              alert(res.data.msg);
            }
          })
        },
        //查询或者绑定店铺
        //店铺详情
        shopInfo() {
          let _this = this;
          this.Tools.AXIOS({
            url: 'user/shopinfo',
            success: function (res) {
              _this.shopDetail = res.data.data;
              _this.shop_gallery_img = res.data.data.gallery_img;
              _this.shop_logo = res.data.data.logo? res.data.data.logo: 'def';
            }
          })
        },
        //商品分类列表
        catelist(){
				var _this = this;
				this.Tools.AXIOS({
                    url: 'product/catelist',
                    success: function (res) {
                        let result = res.data.data
                        // _this.categoryList = res.data.data;
                      _this.categoryList = [
                        {'cate_id':0, 'cate_title':'智能推荐'},
                        {'cate_id':1, 'cate_title':'新品'},
                        {'cate_id':2, 'cate_title':'热销'}
                      ];
                    }
                })
            },
            //分页加载
            onLoad() {
                if(this.page < this.pageNum){
                    this.page++;
                    this.initialize();
                }
            },
            selectType(id,cate_id){
                this.listAll = [];   //清空
                this.page = 1;
                id == -1 ? (this.currentType = -1,this.initialize(0)):(this.currentType = id,this.initialize(cate_id));
            },
            //搜索
            searchIn(){
                this.$router.push({path:'search'});
            }
        },
		components: {
            tabbar,
            Search,
            Swipe,
            SwipeItem,
            [Icon.name]: Icon,
            Dialog
		},
    }
</script>
<style scoped>
    ::-webkit-scrollbar { display: none;}
    .wrap{ background: #fff;}
    .tps{ width: 100%; position: relative; top: 0; background: #fff;z-index: 999;}
    .search{ width: 100%; background: #fff; margin: 0.5% 0;}
    .types-header, .panel-header { display: flex;flex-wrap: nowrap; overflow: auto; -webkit-overflow-scrolling: touch;}
    .header-wrap-inner { width: 90%;  margin-left: 5%;}
    .header-wrap{
      overflow: hidden;
      padding: .3rem 0;
      /*border-bottom: 10px solid #F1F1F1; */
      box-shadow: 0 0 5px #EDEDED;}
    .type-item { font-size: .32rem; flex-shrink: 0; margin: 0 .5rem; color: #666;}
    .type-item:nth-of-type(1){ margin-left: 0; padding-bottom: .1rem;}
    .type-item.selected { border-bottom: 2px solid #FD9709; color: #FD9709; font-weight: bold; }
    .types-list { background-color: #fff; font-size: 14px; color: #333333;display: flex; flex-wrap: wrap;}
    .types-list > .list-item:nth-child(4n) {border-right: none;}
    .list-item.selected { font-weight: bold; color: #63c470; border-bottom: 2px solid #63c470;}
    .loadmore{ padding: 1.5rem 0; }
    .i-home .shoplist{ width: 100%; margin: auto 0; border-bottom: 1px solid #F4F4F4;}
    .i-home .shoplist:last-child{ margin-bottom: 1.5rem;  border-bottom:none;}
    .i-home .shoplist .heade{ width: 95%; line-height: .2rem; padding: 1rem 0 0; margin: 0 auto; overflow: hidden;}
    .i-home .shoplist .heade span:nth-child(1){ font-size: 1.4rem; color: #000; }
    .i-home .shoplist .heade span:nth-child(2){ width: 2.5rem;}
    .i-home .shoplist .heade span img{ width: 100%; }
    .i-home .shoplist ul{ overflow: hidden; }
    .i-home .shoplist ul li{ width: 50%; padding-bottom: .3rem; background: #fff; height: 5.2rem; border: 1px solid #F3F3F3; border-bottom: none; box-sizing: border-box; float: left; display: block;}
    .i-home .shoplist ul li span{ width: 100%; height: 3.5rem; overflow: hidden; display: block;}
    .i-home .shoplist ul li:nth-of-type(2n){ border-left: none;}
    .i-home .shoplist ul li:nth-last-of-type(1),.i-home .shoplist ul li:nth-last-of-type(2){border-bottom:1px solid #F3F3F3;}
    .i-home .indexshoplist ul li:nth-last-of-type(1),.i-home .indexshoplist ul li:nth-last-of-type(2),.i-home .indexshoplist ul li{ border-bottom: none; }
    .i-home .shoplist ul li:nth-last-child(1),.i-home .shoplist ul li:nth-last-child(2){ border-bottom: 0;}
    .i-home .shoplist ul li span img{ width: 100%;}
    .i-home .shoplist ul li p{ padding: 0 .1rem; font-size: .35rem; display: block; color: #323232; border: 0; text-align: left;  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .i-home .shoplist ul li p i{ font-size: .4rem; color: #FD9709; font-style: normal; margin-top: .2rem; display: block;}
    .i-home .shoplist p{ color: #bcb4b4; padding: .35rem 0; text-align: center; border-top: 1px solid #F3F3F3;}
    .i-home .shoplist .point{ color: #bcb4b4; padding: .35rem 0; text-align: center; border-top: 1px solid #F3F3F3;font-size: .3rem;}

    .m_nav{ width: 100%; overflow: hidden; background: #fff; padding: .2rem 0 .5rem; padding-top: 0;}
    .m_nav li{ width: 25%; float: left; margin: .5rem 0 .2rem;}
    .m_nav li span{ width: 1rem; height: 1rem; display: block; text-align: center; background: #000; border-radius: 100px; margin: 0 auto;}
    .m_nav li span i{ color: #fff; line-height: 1.1rem;}
    .m_nav li p{ text-align: center; margin-top: .2rem; font-size: .3rem;}
    .m_nav li:nth-of-type(1) span{ background: #FBADAB;}
    .m_nav li:nth-of-type(2) span{ background: #7FD3F7;}
    .m_nav li:nth-of-type(3) span{ background: #9A5E5D;}
    .m_nav li:nth-of-type(4) span{ background: #61DC9D;}
    .m_nav li:nth-of-type(5) span{ background: #C3A251;}
    .m_nav li:nth-of-type(6) span{ background: #ECC075;}
    .m_nav li:nth-of-type(7) span{ background: #CCA8D7;}
    .m_nav li:nth-of-type(8) span{ background: #8A6FAB;}

    .user_t{ width: 100%; padding-top: .3rem; padding-bottom: 0px;display: flex; justify-content: space-between; background: #fff;flex-direction: column}
    .user_t .ts{ display: flex; margin-top: .2rem; padding-bottom: .2rem; border-bottom: 1px solid #F1F1F1;}
    .user_t .money_num{ color: #fff; margin-right: .3rem;}
    .user_t .money_num span{ display: block; text-align: right; font-size: .35rem; margin: .3rem 0;}
    .user_t .ts i{ width: 1.3rem; height: 1.3rem; margin: 0 .3rem; background: #fff; border-radius: 100px; display: block; overflow: hidden;}
    .user_t .ts span{ font-size: .4rem; line-height: .65rem; color: #fff;}
    .user_t .ts .text{ font-size: .35rem; color: #666;}
    .user_t .ts .text p{ float: left; color: #666; margin-right: .5rem;}
    .user_t .ts .text i{ margin-right: .05rem;}
    .user_t .ts .des{ font-size: .35rem; color: #bcbcbc;}
    .user_t .profile{ padding-bottom: .2rem;padding-left: .3rem;padding-right: .3rem;}
    .user_t .profile i{ float: left;width: .5rem;height: .4rem;margin-top: .1rem;margin-left: 0;margin-right: .1rem;font-size: .4rem;padding-top: .1rem;}

    .d-icon{position: absolute;font-size: 1rem;color: #fb1010;}
</style>
